window.addEventListener("load", async () => {
  try {
    const res = await axios({
      url: "/dashboard",
      headers: {
        authorization: localStorage.getItem("token"),
      },
    });
    const data = res.data.overview;
    for (const key in data) {
      document.querySelector(`[name="${key}"]`).innerHTML = data[key];
    }

    const { year } = res.data;
    // console.log(res);
    function gongzi(year) {
      var myChart = echarts.init(document.getElementById("line"));
      const option = {
        title: {
          text: "2022全年薪资走势",
          left: "5%",
          top: "2%",
        },
        xAxis: {
          type: "category",
          data: year.map((v) => v.month),
          axisLine: {
            lineStyle: {
              type: "dashed",
              color: "pink",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        // grid: {
        //   left: "15%",
        //   top: "15%",
        //   right: "15%",
        //   bottom: "15%",
        // },
        series: [
          {
            data: year.map((v) => v.salary),
            type: "line",
            smooth: true,
            symbolSize: "8",
            lineStyle: {
              width: "5",
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#92c6ff", // 0% 处的颜色
                  },
                  {
                    offset: 0.7,
                    color: "#fff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
        color: ["#62afff"],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
    gongzi(year);

    // 小组薪资
    const { groupData } = res.data;

    // console.log(groupData);
    function xiaozu(groupData) {
      var myChart = echarts.init(document.getElementById("lines"));
      const option = {
        xAxis: {
          type: "category",
          data: groupData[1].map((v) => v.name),
          axisLine: {
            lineStyle: {
              type: "dashed",
              color: "pink",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            data: groupData[1].map((v) => v.hope_salary),
            type: "bar",
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#92c6ff", // 0% 处的颜色
                },
                {
                  offset: 0.7,
                  color: "#bfddf9", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          {
            data: groupData[1].map((v) => v.salary),
            type: "bar",
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#56d8aa", // 0% 处的颜色
                },
                {
                  offset: 0.7,
                  color: "#cff3e7", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        ],
      };
      myChart.setOption(option);

      const btns = document.querySelectorAll("#btns button");
      btns.forEach((dom) => {
        dom.addEventListener("click", function () {
          document
            .querySelector("#btns .btn-blue")
            .classList.remove("btn-blue");
            this.classList.add("btn-blue");
            const k = this.innerHTML.trim()
            option.xAxis.data=groupData[k].map((v)=>v.name)
            option.series[0].data=groupData[k].map((v)=>v.hope_salary)
            option.series[1].data=groupData[k].map((v)=>v.salary)
            myChart.setOption(option)


        });
      });
    }
    xiaozu(groupData);

    // 班级薪资
    const {salaryData}=res.data
    console.log(salaryData);

    const num = salaryData.map((v) => {
      return {
        value :v.g_count + v.b_count,
        name :v.label
      }
    })
    function banji(salaryData) {
      var myChart = echarts.init(document.getElementById("salary")); 
      const option = {
        title:{
          text:"班级薪资分布",
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['60%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 30,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: num
          }
        ],
        color:["#3fceff","#34d39a","#fda224","#5097ff"]
        
      };
      myChart.setOption(option);

    }
    banji(salaryData)

    // 男女薪资

    const nan = salaryData.map((v) => {
      return {
        value :v.b_count,
        name :v.label
      }
    })
    const nv = salaryData.map((v) => {
      return {
        value :v.g_count,
        name :v.label
      }
    })
    function nannv(nan,nv) {
      var myChart = echarts.init(document.getElementById("gender"));
      
      option = {
        title: [
          {
            text: "男女薪资分布",
            left: "2%",
            top:"3%"
          },
          {
            subtext: "男生",
            left: "50%",
            top: "45%",
            textAlign: "center",
          },
          {
            subtext: "女生",
            left: "50%",
            top: "75%",
            textAlign: "center",
          },
        ],
        series: [
          {
            type: "pie",
            radius: ["20%", "25%"],
            center: ["50%", "50%"],
            data: nan,
            label: {
              position: "outer",
              alignTo: "none",
              bleedMargin: 5,
            },

            top: "30%",
          },
          {
            type: "pie",
            radius: ["20%", "25%"],
            center: ["50%", "50%"],
            data: nv,
            label: {
              position: "outer",
              alignTo: "labelLine",
              bleedMargin: 5,
            },

            bottom: "30%",
          },
        ],
        color: ["#3fceff", "#34d39a", "#fda224", "#5097ff"],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

    }
    nannv(nan,nv)

    // 籍贯

    console.log(res)
    const {provinceData} = res.data
    function shengfen() {
      
      const initMapChart = (provinceData) => {
        const myEchart = echarts.init(document.querySelector('#map'))
        const dataList = [
          { name: '南海诸岛', value: 0 },
          { name: '北京', value: 0 },
          { name: '天津', value: 0 },
          { name: '上海', value: 0 },
          { name: '重庆', value: 0 },
          { name: '河北', value: 0 },
          { name: '河南', value: 0 },
          { name: '云南', value: 0 },
          { name: '辽宁', value: 0 },
          { name: '黑龙江', value: 0 },
          { name: '湖南', value: 0 },
          { name: '安徽', value: 0 },
          { name: '山东', value: 0 },
          { name: '新疆', value: 0 },
          { name: '江苏', value: 0 },
          { name: '浙江', value: 0 },
          { name: '江西', value: 0 },
          { name: '湖北', value: 0 },
          { name: '广西', value: 0 },
          { name: '甘肃', value: 0 },
          { name: '山西', value: 0 },
          { name: '内蒙古', value: 0 },
          { name: '陕西', value: 0 },
          { name: '吉林', value: 0 },
          { name: '福建', value: 0 },
          { name: '贵州', value: 0 },
          { name: '广东', value: 0 },
          { name: '青海', value: 0 },
          { name: '西藏', value: 0 },
          { name: '四川', value: 0 },
          { name: '宁夏', value: 0 },
          { name: '海南', value: 0 },
          { name: '台湾', value: 0 },
          { name: '香港', value: 0 },
          { name: '澳门', value: 0 },
        ]
        
        let option = {
          title: {
            text: '籍贯分布',
            top: 10,
            left: 10,
            textStyle: {
              fontSize: 16,
            },
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} 位学员',
            borderColor: 'transparent',
            backgroundColor: 'rgba(0,0,0,0.5)',
            textStyle: {
              color: '#fff',
            },
          },
          visualMap: {
            min: 0,
            max: 6,
            left: 'left',
            bottom: '20',
            text: ['6', '0'],
            inRange: {
              color: ['#ffffff', '#0075F0'],
            },
            show: true,
            left: 40,
          },
          geo: {
            map: 'china',
            roam: false,
            zoom: 1.0,
            label: {
              normal: {
                show: true,
                fontSize: '10',
                color: 'rgba(0,0,0,0.7)',
              },
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)',
                color: '#e0ffff',
              },
              emphasis: {
                areaColor: '#34D39A',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
          series: [
            {
              name: '籍贯分布',
              type: 'map',
              geoIndex: 0,
              data: dataList,
            },
          ],
        }
        myEchart.setOption(option)
      }
    }
   shengfen(provinceData)




  } catch (err) {
    console.dir(err);
  }
});
